<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>摆渡村-壁纸-首页</title>
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/login.css">
    <script rel="script" src="js/vue.js"></script>
</head>
<body>
<div id="app">

    <div class="nav">
        <div class="brand">
            <div class="brand-title">摆渡壁纸</div>
        </div>
        <div class="menu">
            <ul>
                <li><a th:href="@{/}">首页</a></li>
                <li><a th:href="@{/view}">浏览</a></li>
                <li><a th:href="@{/me}">我的</a></li>
            </ul>
        </div>
        <div class="user">
            <div class="user-login"><a th:href="@{/login}">登录</a></div>
        </div>
    </div>

    <div class="login" style="margin-top: 100px;">
        <div class="login-context">
            <div class="title">
                <img th:src="@{/img/img.png}" alt="img">
                <h2>摆渡人，来登陆</h2>
                <h5 style="color: red" th:text="${msg}"></h5>
            </div>
            <form method="post" th:action="@{/login}">
                <div class="input-control">
                    <label>
                        <input type="text" placeholder="请输入您的邮箱" name="email">
                    </label>
                </div>

                <div class="input-control">
                    <label>
                        <input type="password" placeholder="请输入您的密码" name="password">
                    </label>
                </div>

                <div class="input-control" style="display: flex;flex-direction: row;justify-content: space-between;">
                    <img th:src="@{/code}" alt="code" style="width: 100px;height: 30px;margin-top: 5px;padding-left: 10px;"/>
                    <label>
                        <input style="width: 180px;margin-right: 10px;" type="text" placeholder="验证码" name="code">
                    </label>
                </div>

                <div class="input-control" style="background-color: #1890ff">
                    <label>
                        <input type="submit" value="登录" style="background-color: #1890ff;color: #ffffff;font-size: 18px;">
                    </label>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="application/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            nav: {
                display: {
                    logo: true
                }
            }
        }
    });
</script>
</body>
</html>